<template>
  <div class="hospital-intro-container">
    <mains :title="'预约须知'"></mains>
    <Card style="width: 98%;">
      <template #title>
        <h5 style="color: blueviolet;">编辑预约须知</h5>
      </template>
      <Form :model="formData" :label-width="80">
        <FormItem label="医院简介">
          <QuillEditor v-model="formData.content" :options="editorOptions" />
        </FormItem>
        <div class="button-group">
          <Button type="primary" @click="saveIntroduction">保存</Button>
        </div>
      </Form>

    </Card>
   
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'

import { ref, onMounted } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css'; // 引入样式

// 表单数据
const formData = ref({
  content: ''
});

// 编辑器配置
const editorOptions = ref({
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
      ['blockquote', 'code-block'], // 引用 代码块
      [{ header: 1 }, { header: 2 }], // 标题
      [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表 无序列表
      [{ script: 'sub' }, { script: 'super' }], // 下标 上标
      [{ indent: '-1' }, { indent: '+1' }], // 减少缩进 增加缩进
      [{ direction: 'rtl' }], // 文字方向
      [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题级别
      [{ color: [] }, { background: [] }], // 字体颜色 背景颜色
      [{ font: [] }], // 字体
      [{ align: [] }], // 对齐方式
      ['clean'], // 清除格式
      ['link', 'image', 'video'] // 链接 图片 视频
    ]
  }
});

// 保存医院简介
const saveIntroduction = () => {
  console.log('保存的医院简介内容：', formData.value.content);
  
  // 模拟API请求
  setTimeout(() => {
    alert('保存成功！');
  }, 500);
};

// 取消编辑
const cancelEdit = () => {
  // 恢复初始内容或执行其他操作
  console.log('取消编辑');
};

// 初始化数据（可以从API获取）
onMounted(() => {
  // 模拟从后端获取初始数据
  formData.value.content = `
    <h3>医院简介</h3>
    <p>这是一家综合性三甲医院，成立于1950年，拥有先进的医疗设备和专业的医护团队...</p>
    <h4>医院宗旨</h4>
    <p>关爱生命，服务健康</p>
    <h4>特色科室</h4>
    <ul>
      <li>心血管内科</li>
      <li>神经内科</li>
      <li>骨科</li>
      <li>妇产科</li>
    </ul>
  `;
});
</script>

<style scoped>

</style>